<!DOCTYPE html>
<html lang="en">
<head>
  <!-- 网络来源图片 要是通过img标签显示 需要添加mate标签 -->
  <meta name="referrer" content="never">

  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="../tools/bootstrap-3.3.7-dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="../css/base.css">
  <link rel="stylesheet" href="../css/list.css">
  <link rel="stylesheet" href="../tools/jquery-pagination/pagination.css">
  <style>
    .breadcrumb{
      padding-left: 6px;
      padding-right: 6px;
    }

    /* 可以根据自己的需求设定需要的css样式 */
    .m-style{
      width: 700px;
      margin: 20px auto;
    }

    .m-style .prev{
      background: blue;
    }
    .m-style .next{
      background: blue;
    }

    .m-style .active{
      background: pink;
    }
  </style>
</head>
<body>
  <h1>我是一个列表页面</h1>

  <div class="pagi"></div>

  <!-- 为了看的清楚 分页 写在上面了 -->
  <div class="box m-style"></div>

  <div class="container">
    <ul></ul>
  </div>



  <script src="../tools/jquery.min.js"></script>
  <script src="../js/myAjax.js"></script>
  <script src="../js/tools.js"></script>
  <script src="../tools/jquery-pagination/jquery.pagination.js"></script>

  <script>
    // 先设定参数

    // 默认 显示 第一页 内容
    let page = 1;
    // 默认 每页 显示 8 条数据
    let line = 8;
    // 获取浏览器地址栏数据对象
    let obj = myGetUrlValObj();
    // console.log( obj );

    // // 第一次调用函数生成页面 内容为 第一页的内容
    // setPage();

    // // 将 发送 请求 动态渲染生成页面 定义成一个 完整的大函数
    // function setPage(){

    //   // 向 后端程序发送 ajax请求
    //   const xhr = myPromiseJQueryAjax( '../server/goods_list.php' , 'get' , {
    //     cat_one_id: obj.cat_one_id,
    //     page:page,
    //     // 对象的简写语法,键名和键值的变量 名称相同 写一个就行了
    //     line,
    //   } , 'json' );
    //   xhr.then(function(res){
    //     console.log(res);

    //     // 根据 响应体结果 动态渲染生成 页面
    //     let str = '';
    //     res.data.forEach(function(item){
    //       str += `
    //       <li class="list-item">
    //         <div class="panel panel-primary">
    //           <div class="panel-body">
    //             <ol class="breadcrumb">
    //               <li><a href="#">${item.cat_one_id}</a></li>
    //               <li><a href="#">${item.cat_two_id}</a></li>
    //               <li class="active">${item.cat_three_id}</li>
    //             </ol>
    //           </div>
    //           <div class="panel-footer">
    //             <div class="row">
    //               <div class="">
    //                 <div class="thumbnail">
    //                   <img src="${item.goods_big_logo}" alt="...">
    //                   <div class="caption">
    //                     <h3>${item.goods_name}</h3>
    //                     <p>
    //                       <i class="glyphicon glyphicon-yen"></i>
    //                       <span>${item.goods_price}</span>
    //                     </p>
    //                     <p>
    //                       <a href="javascript:;" class="btn btn-primary" role="button">查找相似商品</a> 
    //                       <a href="./detail.html?goods_id=${item.goods_id}" class="btn btn-danger" role="button">查看商品详情</a>
    //                     </p>
    //                   </div>
    //                 </div>
    //               </div>
    //             </div>
    //           </div>
    //         </div>
    //       </li>
    //       `;
    //     })

    //     $('.container ul').html(str);

    //     // 将 分页插件程序 直接定义在 响应体程序中
    //     // 分页插件功能
    //     $('.box').pagination({
    //       pageCount: res.sumPage,       // 总页数
    //       totalData: res.row,           // 数据总数量
    //       current: res.page,            // 当前第几页
    //       showData: res.line,           // 每页数据数量
    //       prevCls:'prev',               // 上一页类名
    //       nextCls:'next',               // 下一页类名
    //       prevContent: '上一页',         // 上一页内容
    //       nextContent: '下一页',         // 下一页内容
    //       activeCls: 'active',           // 选中页 class类名
    //       mode: 'fixed',                 // 显示分页按钮 为 固定模式状态
    //       count: 4,                      // 分页按钮 显示的数量 不算 选中页 也就是 设定4 一共显示 5个按钮
    //       coping: true,                  // 显示 首页 末页
    //       homePage: '首页',              // 设定首页内容
    //       endPage: '末页',               // 设定末页内容
    //       isHide: true,                  // 总页数 为 0 或者 1 隐藏 分页控件
    //       keepShowPN: true,              // 显示 上一页 下一页 
    //       jump: true,                    // 开启 跳转
    //       callback:function(result){     // 执行的回调函数 必须要有一个参数
    //         // 参数.getCurrent() 获取分页插件 点击之后 对应的页数
    //         console.log( result.getCurrent()  );

    //         // 将结果 赋值给 page 变量 存储
    //         page = result.getCurrent();

    //         // 根据新的 page 数据 再次发送请求 动态渲染生成新的页面
    //         setPage()
    //       }
    //     });

    //   })

    // }


    // 使用 async 和 await 实现
    setPage();
    async function setPage(){

      // 向 后端程序发送 ajax请求
      const res =await myPromiseJQueryAjax( '../server/goods_list.php' , 'get' , {
        cat_one_id: obj.cat_one_id,
        page:page,
        // 对象的简写语法,键名和键值的变量 名称相同 写一个就行了
        line,
      } , 'json' );
      console.log(res);

      // 根据 响应体结果 动态渲染生成 页面
      let str = '';
      res.data.forEach(function(item){
        str += `
        <li class="list-item">
          <div class="panel panel-primary">
            <div class="panel-body">
              <ol class="breadcrumb">
                <li><a href="#">${item.cat_one_id}</a></li>
                <li><a href="#">${item.cat_two_id}</a></li>
                <li class="active">${item.cat_three_id}</li>
              </ol>
            </div>
            <div class="panel-footer">
              <div class="row">
                <div class="">
                  <div class="thumbnail">
                    <img src="${item.goods_big_logo}" alt="...">
                    <div class="caption">
                      <h3>${item.goods_name}</h3>
                      <p>
                        <i class="glyphicon glyphicon-yen"></i>
                        <span>${item.goods_price}</span>
                      </p>
                      <p>
                        <a href="javascript:;" class="btn btn-primary" role="button">查找相似商品</a> 
                        <a href="./detail.html?goods_id=${item.goods_id}" class="btn btn-danger" role="button">查看商品详情</a>
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </li>
        `;
      })

      $('.container ul').html(str);

      // 将 分页插件程序 直接定义在 响应体程序中
      // 分页插件功能
      $('.box').pagination({
        pageCount: res.sumPage,       // 总页数
        totalData: res.row,           // 数据总数量
        current: res.page,            // 当前第几页
        showData: res.line,           // 每页数据数量
        prevCls:'prev',               // 上一页类名
        nextCls:'next',               // 下一页类名
        prevContent: '上一页',         // 上一页内容
        nextContent: '下一页',         // 下一页内容
        activeCls: 'active',           // 选中页 class类名
        mode: 'fixed',                 // 显示分页按钮 为 固定模式状态
        count: 4,                      // 分页按钮 显示的数量 不算 选中页 也就是 设定4 一共显示 5个按钮
        coping: true,                  // 显示 首页 末页
        homePage: '首页',              // 设定首页内容
        endPage: '末页',               // 设定末页内容
        isHide: true,                  // 总页数 为 0 或者 1 隐藏 分页控件
        keepShowPN: true,              // 显示 上一页 下一页 
        jump: true,                    // 开启 跳转
        callback:function(result){     // 执行的回调函数 必须要有一个参数
          // 参数.getCurrent() 获取分页插件 点击之后 对应的页数
          console.log( result.getCurrent()  );

          // 将结果 赋值给 page 变量 存储
          page = result.getCurrent();

          // 根据新的 page 数据 再次发送请求 动态渲染生成新的页面
          setPage()
        }
      });

    }

    



  </script>

  <script>
    /*
      1 根据 前端传参 cat_one_id 数值 获取 后端数据库数据 
        动态渲染生产页面内容
          传参方式 get 方式
          携带参数是 cat_one_id 一级分类名称
                    page  分页显示 当前是 第几页 默认 显示 第一页内容
                    line  一页显示 几条数据 也就是每页显示的数据数量
                          需要根据实际项目需求设定 我们目前设定 8

        响应体数据
          data: (8) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
            存储 结果的数组
          line: "8"
            每页数据数量
          page: "1"
            当前第几页
          row: "100"
            数据总数量
          sumPage: 13
            总页数

        分页显示需要的数据 存储在异步请求 获取的结果中 
          因为是 异步请求 理论上 会 最后执行
          设定 分页显示时 异步程序 还没有执行
          也就没有 数据结果 
          解决方案:
            1,  使用 async 和 await 来完成 请求 执行效果 类似于 通过程序
            2,  将 分页插件 设定到 异步请求的回调函数中

      2 分页显示 使用 插件完成
        (1) 导入 插件的 相关文件
            pagination.css  css样式设定文件
            jquery.pagination.js  功能文件
                                  必须要先 导入 jQuery文件 再导入 这个文件

        (2) 使用步骤
            创建一个div,设定class等属性 
            根据设定的属性 使用选择器获取标签对象,设定 分页器插件
            $('条件').pagination(参数)
              参数是一个对象 通过对象的属性设定分页器 相关的 参数数据
              pageCount       	总页数
              totalData         数据总数量
              current           当前第几页
              showData          每页数据数量
              prevCls           上一页class类名
              nextCls           下一页class类名

    
    */
  </script>
</body>
</html>


<!--  





-->